Home Explore Help
Register Sign In
Kodo
/
kodo
Watch 2
Star 0
Fork 0

Browse Source
adjust photo detail page

Brightcells 9 years ago
parent
f679be700a
commit
4b7cfa2426
1 changed files with 143 additions and 9 deletions
Show Diff Stats
  1. 143 9
      photo/templates/photo/photo_detail.html

+ 143 - 9
photo/templates/photo/photo_detail.html
View File 

@@ -1,10 +1,144 @@
1 
+{% load staticfiles %}
2 
+
1 3 
 <!DOCTYPE html>
2 
-<html>
3 
-<head lang="en">
4 
-    <meta charset="UTF-8">
5 
-    <title></title>
6 
-</head>
7 
-<body>
8 
-    <img src="{{ photo_url }}">
9 
-</body>
10 
-</html>
4 
+<html lang="zh-CN">
5 
+    <head>
6 
+        <meta charset="utf-8">
7 
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 
+        <meta name="format-detection" content="telephone=no,email=no,address=no">
9 
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
10 
+        <title>下载页面</title>
11 
+        <script>!function(){var d=document.documentElement;d.style.fontSize=d.clientWidth*0.05+'px'}()</script>
12 
+        <style>
13 
+{#            index.css#}
14 
+            *, :after, :before {
15 
+                box-sizing: border-box;
16 
+                outline: none;
17 
+            }
18 
+{#            Body#}
19 
+            body {
20 
+                color: #333;
21 
+                font-family: -apple-system,Arial,Microsoft YaHei,Helvetica Neue,sans-serif;
22 
+                -webkit-font-smoothing: antialiased;
23 
+                text-rendering: optimizeLegibility;
24 
+                background-color: #fff;
25 
+            }
26 
+            body {
27 
+                margin: 0;
28 
+            }
29 
+{#            A#}
30 
+            a {
31 
+                color: #000;
32 
+                text-decoration: none;
33 
+                -webkit-transition: color,.3s;
34 
+                transition: color,.3s;
35 
+            }
36 
+            a {
37 
+                background-color: transparent;
38 
+            }
39 
+{#            Img#}
40 
+            img {
41 
+                border: 0;
42 
+            }
43 
+{#            Container#}
44 
+            .container {
45 
+                width: 960px;
46 
+                margin-left: auto;
47 
+                margin-right: auto;
48 
+                position: relative;
49 
+            }
50 
+            @media (max-width: 960px) {
51 
+                .container {
52 
+                    width: 100%;
53 
+                }
54 
+            }
55 
+            .text-center {
56 
+                text-align: center;
57 
+            }
58 
+{#            Article#}
59 
+            article {
60 
+                display: block;
61 
+            }
62 
+{#            app.css#}
63 
+            html, body {
64 
+                height: 100%;
65 
+                overflow: hidden;
66 
+            }
67 
+            .container {
68 
+                position: relative;
69 
+                width: 100%;
70 
+                height: 100%;
71 
+                background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
72 
+            }
73 
+            img {
74 
+                width: 100%;
75 
+            }
76 
+
77 
+            .download_section {
78 
+                position: absolute;
79 
+                right: 0;
80 
+                bottom: 0;
81 
+                left: 0;
82 
+                height: 55px;
83 
+                padding: 5px;
84 
+                background: #f0f0f0;
85 
+                box-sizing: border-box;
86 
+            }
87 
+            .pai2_icon {
88 
+                width: 45px;
89 
+                height: 45px;
90 
+                float: left;
91 
+            }
92 
+            .pai2_icon>img {
93 
+                width: 100%;
94 
+                height: 100%;
95 
+            }
96 
+            .pai2_desc {
97 
+                height: 45px;
98 
+                padding: 3px 0 0 5px;
99 
+                float: left;
100 
+            }
101 
+            .pai2_name {
102 
+                font-size: 15px;
103 
+                text-align: left;
104 
+            }
105 
+            .pai2_des {
106 
+                padding-top: 7px;
107 
+                font-size: 12px;
108 
+                line-height: 23px;
109 
+                color: #8f8f8f;
110 
+                text-align: left;
111 
+            }
112 
+            .pai2_download {
113 
+                position: relative;
114 
+                top: 5px;
115 
+                width: 100px;
116 
+                height: 35px;
117 
+                line-height: 35px;
118 
+                text-align: center;
119 
+                background: #d13621;
120 
+                color: #fff;
121 
+                border-radius: 5px;
122 
+                float: right
123 
+            }
124 
+        </style>
125 
+    </head>
126 
+    <body>
127 
+        <div class="container">
128 
+            <article class="text-center">
129 
+                <img src="{{ photo_url }}">
130 
+
131 
+                <div id="download_section" class="download_section">
132 
+                    <div class="pai2_icon">
133 
+                        <img src="{% static 'pai2/img/paiai_96_96.png' %}">
134 
+                    </div>
135 
+                    <div class="pai2_desc">
136 
+                        <div class="pai2_name">拍爱</div>
137 
+                        <div class="pai2_des">即拍即分享</div>
138 
+                    </div>
139 
+                    <div id="pai2_download" class="pai2_download">立即下载</div>
140 
+                </div>
141 
+            </article>
142 
+        </div>
143 
+    </body>
144 
+</html>